$.fn.drawCircle = function(){
    var ctx = $(this)[0].getContext('2d');
    var mW = $(this).width();
    var mH = $(this).height();
    var lineWidth = 10;
    var r = mW / 2; //中间位置
    var percent = $(this).attr("percent");
    var startAngle = -0.5* Math.PI; //开始角度
    var endAngle = startAngle + 2 * Math.PI*percent/100; //结束角度
    var xAngle = 1 * (Math.PI / 90); //偏移角度量
    var fontSize = 35; //字号大小
    var tmpAngle = startAngle; //临时角度变量
  
    function draw(){
        if(tmpAngle >= endAngle){
            return;
        }else if(tmpAngle + xAngle > endAngle){
            tmpAngle = endAngle;
        }else{
            tmpAngle += xAngle;
        }
        ctx.clearRect(0,0, mW, mH);

        //背景灰线
        ctx.beginPath();
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = '#e8e8e8';
        ctx.arc(r, r,(r-5), 0, Math.PI * 2);
        ctx.stroke();
        ctx.closePath();
        //画圈
        ctx.beginPath();
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = '#1c86d1';
        ctx.arc(r,r,(r-5),startAngle,tmpAngle,false);
        ctx.stroke();
        ctx.closePath();
        //写字
        ctx.fillStyle = '#1c86d1';
        ctx.font= fontSize + 'px Microsoft Yahei';
        ctx.textAlign='center';
        ctx.fillText( Math.round((tmpAngle -  startAngle) / (endAngle - startAngle) * percent )+'%', r, r + fontSize / 2);
        requestAnimationFrame(draw);
    }
    draw()
}